<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>hls-demo</title>
    <style>
      #video {
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <video id="video" width="500" controls muted></video>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script>
    var video = document.getElementById('video');
    var m3u8 = "http://10.200.137.11:91/videos/1.mp4";
    if (Hls.isSupported()) {
      var hls = new Hls();
      hls.loadSource(m3u8);
      hls.attachMedia(video);
      console.log(Hls.Events)
      hls.on(Hls.Events.MANIFEST_PARSED, function() {
        video.play();
      });
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = m3u8;
      video.addEventListener('loadedmetadata', function() {
        video.play();
      });
    }
  </script>
</html>
